<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="${ctx}/css/common.css" />
	<jsp:include page="../inc.jsp"></jsp:include>
	<jsp:include page="../head.jsp"></jsp:include>
<meta http-equiv="X-UA-Compatible" content="edge" />
<title>账户管理-账户查询</title>
 
<style>
	.searchBox{
		margin-top:10px;
		height:30px;
	}
	.searchBox li{
		float:left;
		margin-left:3px;
	}
	.header{
		border-collapse:collapse;
		cellspadding:5px;
	}
	.header td{
		width:360px;
		border:1px solid #dddddd; 
		text-align:center;
	}
	.mynewBtn{
		line-height:20px;
	}
	.red{
		width:120px;
		height:20px;
		display:block;
		float:left;
		line-height:20px;
		margin-left:18px;
		margin-top:3px;
		color:red;
	}
	.spec{
		margin-left:130px;
	}
	.list_wrap{
	    list-style: none;
	    margin-top: 5px;
	    padding-left: 10px;
	}
	.list_wrap li{
	    padding: 5px;
	}
</style>
<script type="text/javascript">
	$(function(){
		//填充页面第一个表格信息
		function getAjax(){
			$.ajax({
				type:"get",
				url:'${ctx}/tradeList/page?page=1&rows=10&temp='+Math.random(),
				async:true,
				dataType:"json",
				success:function(data){
					if(data.rows.length > 0){
						$("#availableBalance").html(CommonConverter.toZero(data.rows[0].availableBalance));
						$("#freezeAmount").html(CommonConverter.toZero(data.rows[0].freezeAmount)); 
					}else{
						$("#availableBalance").html(0);
						$("#freezeAmount").html(0);
					};
					
				},
				error:function(){
					layer.alert("请检查网络连接，然后重试！");
				}
			});
		};
		getAjax();
		//填充交易记录表格信息
		dataGrid = $('#table').datagrid({
			url:'${ctx}/tradeList/page?temp='+Math.random(),
			width:1600,
			striped : true,
			singleSelect : true,
			idField : 'flightIdList',
			pageList : [5,10,20],
			//sortName : 'id',
			//sortOrder : 'asc',
			method : 'get',
			//toolbar:'#toolbar',
			pagination:true,
			columns:[[{
				width : '160',
				title : '支付单号',
				align : 'center',
				field : 'payOrderNumber',
			},{
				width : '135',
				title : '日期',
				align : 'center',
				field : 'createTime',
			},{
				width : '130',
				title : '类型',
				align : 'center',
				field : 'scheduleId',
				formatter : function(value,row){
					var str=CommonConverter.toTradeStr(row.tradeType);
					return str;
				}
			},{
				width : '80',
				title : '收入（元）',
				align : 'center',
				field : 'income'
			},{
				width : '80',
				title : '支出（元）',
				align:'center',
				field : 'cost'
			},{
				width : '90',
				title : '账户余额（元）',
				align:'center',
				field : 'accountBalance'
			},{
				width : '120',
				title : '支付方式',
				align:'center',
				field : 'placeHolder',
				formatter : function(value,row){
					var payType=CommonConverter.toPaystr(row.payType);
					return payType;
				}
			},{
				width : '100',
				title : '备注',
				align:'center',
				field : 'remark',
			}] ]
		});
		//点击查询
		$("#query").click(function(){
			var payOrderNumber=$("#_orderNumber").val();
			var startDate=$("#_startTime").datebox('getValue');
			var endDate=$("#_endTime").datebox('getValue');
			var tradeType=$("#tradeType").val();
			//console.log(startDate+"+"+endDate+"+"+tradeType)
			$("#table").datagrid("load",{"payOrderNumber":payOrderNumber,"startDate":startDate,"endDate":endDate,"tradeType":tradeType});
			$('#table').datagrid('unselectAll');//清除全选
			getAjax();
		});
		//点击充值
		$("#recharge").click(function(){
			layer.open({
				type: 2,
				title: ['充值','background-color:#00B2EE; color:#fff;'],
				shadeClose: true,
				shade: 0.5,
				area: ['500px', '300px'],
				content: ['${ctx}/np/tradeRecharge', 'no'],
				end:function(){
					getAjax();
					$("#table").datagrid("reload");
				}
			});
		});
		
		//点击提现按钮
		$("#withdraw").click(function(){
			layer.open({
				type: 2,
				title: ['提现','background-color:#00B2EE; color:#fff;'],
				shadeClose: true,
				shade: 0.3,
				area: ['400px', '250px'],  
				content: ['${ctx}/np/withdraw','no'], //iframe的url，no代表不显示滚动条
				end:function(){
					$("#table").datagrid("reload");
				}
			});
		});
		//余额为空  变成0
		function toZero(rows,money){
			if(rows.length == 0){
				return 0;
			}else{
				return money;
			};
		};
		
	});
</script>
</head>
<body>
	<div>
		<div style="height: 100px">
			<ul class="list_wrap">
				<li>账户余额：<span id="availableBalance"></span>元</li>
				<li>冻结押金：<span id="freezeAmount"></span>元</li>
			</ul> 
			<ul class="searchBox">
					<li>支付单号：<input style='width:120px;' class="easyui-textbox" id="_orderNumber" /></li>
					<li>日期 ：<input class="easyui-datebox" id="_startTime"
						style="width: 120px" /> 至<input class="easyui-datebox"
						id="_endTime" style="width: 120px" /></li>
					<li>
					<li>
						类型
						<select id="tradeType" style="width: 73px;">
							<option value="">所有</option>
							<option value="0">票款</option>
							<option value="1">押金</option>
							<option value="2">提现</option>
							<option value="3">充值</option>
						</select>
					</li>
					<li><button class='query' id="query">查询</button></li>
					<c:if test="${fn:contains(sessionInfo.resourceList, '/np/tradeRecharge')}">
						<li><button class='query' id="recharge">充值</button></li>
					</c:if>
					<c:if test="${fn:contains(sessionInfo.resourceList, '/np/tradeWithdraw')}">
						<li><button class='query' id="withdraw">提现</button></li>
					</c:if>
					<!-- <li><button class='query' id="query">解冻说明</button></li> -->
				</ul>
		</div>
		<div>
			<table id="table" class="easyui-datagrid"></table>
		</div>
	</div>
	<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>